<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hoy en la Javeriana</title>

<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=2" />
<!--[if lt IE 9]>
	    <script src="dist/html5shiv.js"></script>
	    <![endif]-->

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<style type="text/css">
@font-face {
	font-family: GIL;
	src: url(webfonts/GIL.ttf) format('truetype');
}

@font-face {
	font-family: GILB;
	src: url(webfonts/GILB.ttf) format('truetype');
}

body {
	background-image: url('img/PORTADA.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: #071820;
}

#escudo {
	width: auto;
	clear: left;
	margin: -2% 0% 0% 5%;
}

#LogoBolt {
	margin: auto;
	float: right;
	width: auto;
	position: relative;
	padding: 20% 0% 0% -2%;
}

#contenido {
	position: relative;
	width: 30%;
	height: auto;
	float: right;
	clear: left;
	padding: 0% 0% 5% 70%;
}

form table {
	width: 100%;
	border: 0px;
	padding: 0px;
	margin: auto;
}

form {
	margin: auto;
	padding: 10%;
	height: 100%;
}

form input,form textarea {
	font-family: GIL;
	font-size: 14px;
	color: #1B2934;
	border: 1px dotted white;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	border-radius: 5px 5px 5px 5px;
	width: 100%;
}

#btn_env {
	float: right;
	clear: right;
	width: 100px;
	height: auto;
	padding: 0, 10%;
	margin-left: 60%;
}
</style>

<script>
	$(document)
			.ready(
					function() {
						$('#init')
								.live(
										'click',
										function() {
											//alert('http://localhost:8080/newspuj/loginuser?usuario='+$('#usuario').val()+'&contrasena='+$('#contrasena').val());
											$
													.getJSON(
															'http://localhost:8080/newspuj/loginuser?usuario='+$('#usuario').val()+'&contrasena='+$('#contrasena').val(),
															function(data) {
																//alert(data.mensaje); //uncomment this for debugl
																if (data.mensaje == 'true') {
																	window.location.href = "http://localhost:8080/newspuj/noticias.html?usuario="+$('#usuario').val();
																} else {
																	alert("Usuario o contraseña invalida!");
																}
															});
										});

					}

			);
</script>

</head>

<body>

	<div id="escudo">
		<img src="img/LG_INC_PUJ.svg" width="auto">
	</div>

	<div id="LogoBolt">
		<img src="img/LG_INC_BOLH.svg" width="auto">
	</div>

	<div id="contenido">
		<!-- http://localhost:8080/newspuj/loginuser -->
		<form id="loginform" action="#" method="post">
			<table>
				<tr>
					<td><input type="text" width=40% value="usuario"
						name="usuario" id="usuario" /></td>
				</tr>
				<td><input type="password" width=40% value="contrasena"
					name="contrasena" id="contrasena" /></td>
				</tr>
				<tr>
					<td>
						<div id="btn_env">
							<input type="button" id="init" name="init" value="Iniciar sesión">
						</div>
					</td>
				</tr>
			</table>
		</form>

	</div>

</body>
</html>